@tailwind base;
@tailwind components;
@tailwind utilities;

/* 设置页面自定义样式 */
.settings-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.tab-button {
  @apply px-6 py-3 text-sm font-medium rounded-lg transition-colors duration-200;
}

.tab-button.active {
  @apply bg-boss-green text-white;
}

.tab-button:not(.active) {
  @apply bg-white text-gray-600 hover:bg-gray-50 border border-gray-200;
}

.settings-card {
  @apply bg-gradient-to-br from-white to-gray-50 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-boss-green;
}

.form-group {
  @apply mb-6;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-2;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boss-green focus:border-transparent transition-colors duration-200;
}

.form-textarea {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boss-green focus:border-transparent transition-colors duration-200 resize-none;
}

.form-select {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-boss-green focus:border-transparent transition-colors duration-200 bg-white;
}

.switch {
  @apply relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-boss-green focus:ring-offset-2;
}

.switch.enabled {
  @apply bg-boss-green;
}

.switch.disabled {
  @apply bg-gray-200;
}

.switch-thumb {
  @apply inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200;
}

.switch.enabled .switch-thumb {
  @apply translate-x-6;
}

.switch.disabled .switch-thumb {
  @apply translate-x-1;
}

.slider {
  @apply w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer;
}

.slider::-webkit-slider-thumb {
  @apply appearance-none h-5 w-5 bg-boss-green rounded-full cursor-pointer;
}

.slider::-moz-range-thumb {
  @apply h-5 w-5 bg-boss-green rounded-full cursor-pointer border-0;
}

.tag-input {
  @apply flex flex-wrap gap-2 p-2 border border-gray-300 rounded-lg min-h-[42px] focus-within:ring-2 focus-within:ring-boss-green focus-within:border-transparent;
}

.tag {
  @apply inline-flex items-center px-3 py-1 bg-boss-green text-white text-sm rounded-full;
}

.tag-remove {
  @apply ml-2 text-white hover:text-gray-200 cursor-pointer;
}

.btn-primary {
  @apply bg-gradient-to-r from-boss-green to-primary-600 hover:from-primary-600 hover:to-boss-green text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

.btn-secondary {
  @apply bg-white hover:bg-gradient-to-r hover:from-gray-50 hover:to-white text-boss-green border-2 border-boss-green font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-md hover:shadow-lg;
}

.btn-danger {
  @apply bg-gradient-to-r from-red-500 to-red-600 hover:from-red-600 hover:to-red-700 text-white font-semibold py-3 px-6 rounded-xl transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl;
}

.stats-grid {
  @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4;
}

.stat-card {
  @apply bg-white rounded-xl p-4 shadow-soft border border-gray-100 text-center;
}

.records-table {
  @apply w-full bg-white rounded-xl shadow-soft overflow-hidden;
}

.table-header {
  @apply bg-gray-50 border-b border-gray-200;
}

.table-row {
  @apply border-b border-gray-100 hover:bg-gray-50 transition-colors duration-200;
}

.table-cell {
  @apply px-4 py-3 text-sm;
}

.status-badge {
  @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
}

.status-success {
  @apply bg-green-100 text-green-800;
}

.status-failed {
  @apply bg-red-100 text-red-800;
}

.status-pending {
  @apply bg-yellow-100 text-yellow-800;
}